<template>
  <div style="width:50%;text-align:center;margin:auto;">
    <el-form ref="dataForm" :rules="rules" :model="authoritytemp" label-position="left" label-width="60px"
      style="text-align: left;">
      <el-form-item label="权限">
            <!-- label绑定的值是要传的值 -->
            <!-- 这里是视图上显示给用户看的值 -->
        <el-checkbox-group v-model="role" :min="1" @change="handleCheckedCitiesChange">
          <el-checkbox v-for="(item, index) in roles" :key="index" :label="item.value" style="display: inline-block;">
            {{ item.title }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible()">
        取消
      </el-button>
      <el-button type="primary" :loading="loading" @click="createData()">
        确认
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AuthorityForm',
  props: {
    authoritytemp: { type: Object, default: Object }
  },
  data() {
    return {
      loading: false,
      rules: {},
      roles: [
        { value: 1, title: '查看企业' },
        { value: 4, title: '查看企业职称人员' },
        { value: 2, title: '查看人才' },
        { value: 3, title: '查看项目' },
      ],
      role: [],
    }
  },
  computed: {

  },
  watch: {
    'authoritytemp': {
      immediate: true,
      handler(newVal, oldValue) {
        let roles = []
        newVal.role.forEach(element => {
          roles.push(element.roleId)
        });
        this.role = roles
      },
      deep: true
    }
  },
  methods: {
    dialogFormVisible() {
      this.$emit('dialogAuthorityVisibleEmit', false)
    },
    handleCheckedCitiesChange(value) {
      // 要求：有4的时候必须选上1，而且有4的时候不能取消1
      if(value.includes(4)&&!value.includes(1)){
        this.role.push(1);
      }else{
        console.log('no')
      }
    },
    createData() {
      // 后台要求提交字符串：1;2;3
      let a = this.role.join(';')
      const temp2 = {
        userId: this.authoritytemp.userId,
        role: a
      }
      // return
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$emit('createAuthority', temp2)
        }
      })
    }
  }
}
</script>
